<template>
  <div>
    <el-header class="header">
      <div class="logo">
        <img src="../imgs/home_logoV1-2.png" height="60" width="474"/></div>
      <el-menu :default-active="activeIndex" class="top-nav-menu" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="7">关注微信</el-menu-item>
        <el-menu-item index="2">花礼网app</el-menu-item>
        <el-menu-item index="4">订单查询</el-menu-item>
        <el-menu-item index="5" class="el-icon-headset">客户服务</el-menu-item>
        <el-menu-item index="6" class="cart-menu-item">
          <el-badge :value="cartCount" class="item" :max="99">
            <el-tooltip class="item" effect="dark" content="购物车" placement="bottom">
              <i class="el-icon-shopping-cart-2"></i>
            </el-tooltip>
          </el-badge>
        </el-menu-item>
        <el-menu-item index="3" class="login-menu-item">
          <el-dropdown v-if="username" @command="handleCommand">
            <span class="el-dropdown-link">
              你好, <span style="color: red">{{ username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="personal">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <template v-else>
            你好，请登录注册
          </template>
        </el-menu-item>
        <el-menu-item>
          <el-avatar :size="60" :src="src" shape="square">
            <img src="../imgs/error.png" alt="头像"/>
          </el-avatar>
        </el-menu-item>
      </el-menu>
    </el-header>
    <!-- 添加搜索框 -->
    <div class="search-bar">
      <!-- 价格搜索输入框 -->
      <el-input-number
          v-model="searchPrice.min"
          placeholder="最低价"
          class="search-price"
          :min="0"
          :value="0"
          @change="handlePriceChange"
      />
      <span class="to">-</span>
      <el-input-number
          v-model="searchPrice.max"
          placeholder="最高价"
          class="search-price"
          :min="searchPrice.min || 0"
          @change="handlePriceChange"
      />

      <!-- 鲜花类型选择 -->
      <el-select v-model="searchType" placeholder="请选择鲜花类型" class="search-select">
        <el-option label="全部" value="all"></el-option>
        <el-option label="玫瑰" value="rose"></el-option>
        <el-option label="郁金香" value="tulip"></el-option>
        <el-option label="康乃馨" value="carnation"></el-option>
        <el-option label="百合" value="lily"></el-option>
      </el-select>

      <!-- 搜索文本框 -->
      <el-input
          placeholder="请输入鲜花信息？"
          v-model="searchQuery"
          clearable
          @clear="handleSearchReset"
          @keyup.enter="handleSearch"
          class="search-input"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>

    <el-container>
      <el-aside width="200px" class="menu-container">
        <h2>鲜花分类</h2>
        <ul class="menu-list">
          <li v-for="category in categories" :key="category" @click="filterByCategory(category)">
            {{ category }}
          </li>
        </ul>
      </el-aside>
      <el-main>
        <el-carousel trigger="manual" height="500px" arrow="always">
          <el-carousel-item v-for="(flower, index) in flowers" :key="index">
            <img :src="flower.image" alt="Flower" />
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  Header as ElHeader,
  Menu,
  MenuItem,
  Badge,
  Tooltip,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Input,
  Button,
  Select,
  Option,
  InputNumber,
  Aside,
  Main,
  Carousel,
  CarouselItem
} from 'element-ui';

export default {
  components: {
    [ElHeader.name]: ElHeader,
    [Menu.name]: Menu,
    [MenuItem.name]: MenuItem,
    [Badge.name]: Badge,
    [Tooltip.name]: Tooltip,
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option,
    [InputNumber.name]: InputNumber,
    [Aside.name]: Aside,
    [Main.name]: Main,
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem
  },
  data() {
    return {
      activeIndex: '1', // 默认激活的菜单项
      cartCount: 0, // 购物车数量
      username: '', // 存储用户名
      src: '', // 存储头像地址
      user: { // 存储用户信息
        username: '',
        src: ''
      },
      searchType: '', // 选择的鲜花类型
      searchQuery: '', // 搜索框的数据绑定
      searchPrice: {
        min: 0, // 最低价格
        max: 0  // 最高价格
      },
      categories: ['爱情鲜花', '生日鲜花', '友情鲜花', '问候长辈', '探病慰问', '道歉鲜花', '祝贺鲜花', '婚庆鲜花', '商务鲜花'],
      flowers: [
        { image: 'https://img02.hua.com/zhuanti/zhongqiu/2024/pc_zhongqiu_banner.jpg' },
        { image: 'https://img02.hua.com/slider/23_brand_banner_pc.jpg' },
        { image: 'https://img02.hua.com/slider/23_birthday_pc.jpg' },
        { image: 'https://img02.hua.com/zhuanti/birthday/pc/banner_lover.png' },
      ]
    };
  },
  methods: {
    filterByCategory(category) {
      // 根据分类筛选逻辑
      console.log('Filtered by category:', category);
    },
    // ---------搜索-------------
    handleSearch() {
      // 检查最高价格是否不等于0且文本搜索框中有内容
      if (this.searchQuery.trim() !== '' || this.searchType !== '' || this.searchPrice.max !== 0) {
        // 执行基于价格和其他内容的搜索
        console.log('执行基于价格和其他内容的搜索');
        console.log('搜索类型:', this.searchType);
        console.log('搜索内容:', this.searchQuery);
        console.log('价格范围:', this.searchPrice);
        // 调用API或跳转到搜索结果页面...
        // 重置搜索条件
        this.handleSearchReset();
      } else {
        this.$message.error('没有提供有效的搜索条件');
      }
    },
    handleSearchReset() {
      // 重置搜索条件到默认状态
      this.searchType = '';
      this.searchQuery = '';
      this.searchPrice = {min: null, max: null};
    },
    handlePriceChange() {
      // 当价格改变时，确保最高价不小于最低价
      if (this.searchPrice.max < this.searchPrice.min) {
        this.searchPrice.max = this.searchPrice.min;
      }
    },

    handleSelect(key, keyPath) {
      if (key === '3' && !this.username) {
        this.$router.push('/');
      } else {
        console.log('选中菜单项:', key, keyPath);
      }
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.username = ''; // 清空用户名
        this.src = ''; // 清空头像地址
        this.mainIframeSrc = '#'; // 清空iframe的URL
      } else if (command === 'personal') {
        // 根据登入的名字查询这个用户的信息
        this.$router.push('/userOne');
        alert('进入个人中心');
      }
    },
    getCookie(name) {
      let nameEQ = name + "=";
      let ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return '';
    },
    selectName() {
      console.log(this.user)
      this.$axios({
        method: 'post',
        url: 'http://localhost:9091/user/selectOne',
        data: this.user,
      }).then(res => {
        if (res.data && res.data.data && res.data.data.src) {
          this.src = res.data.data.src; // 将查询到的图片路径赋值给 src
        } else {
          console.error('头像数据获取失败');
        }
      })
    }
  },
  created() {
    this.username = this.getCookie('username');
    this.user.username = this.username;
    this.selectName();
  },
};
</script>

<style scoped>
.logo[data-v-0cec1358] {
  font-size: 10px;
  font-weight: bold;
  height: 65px;
  width: 40px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #333;
  height: 60px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-left: 24px;
}

.top-nav-menu {
  display: flex;
  justify-content: center;
  width: 70%;
  align-items: center;
}

.cart-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.item {
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.el-icon-shopping-cart-2 {
  font-size: 20px;
}

.el-badge__content.is-fixed {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #f56c6c;
  color: #fff;
  text-align: center;
  line-height: 20px;
  padding: 0 5px;
  font-size: 12px;
  right: 0;
}

/* 添加搜索框的样式 */
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center; /* 确保垂直居中 */
  margin: 20px 0 18px 200px; /* 添加左边距50px */
}

.search-select {
  margin-right: 10px; /* 为选择框和输入框之间添加间距 */
}

.search-input {
  width: 225px; /* 更新搜索框宽度为225px */
  margin-right: 10px; /* 为输入框和价格输入框之间添加间距 */
}

.search-price {
  margin-right: 10px; /* 为价格输入框之间添加间距 */
}

.to {
  margin-right: 10px; /* 为"-"符号和价格输入框之间添加间距 */
}

/* 调整内部输入框和按钮的样式 */
.el-input-group--append .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.el-input-group__append {
  background-color: #f5f5f5;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.el-button {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
}
/*
*/
.menu-container {
  background-color: #f9f9f9;
  border-right: 1px solid #eaeaea;
  min-height: 100vh;
}

.menu-list {
  list-style-type: none; /* 去除默认项目符号 */
  padding-left: 0; /* 去除默认的缩进 */
  margin: 0;
}

.menu-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eaeaea;
}

.menu-item:hover {
  background-color: #e1e1e1;
}
</style>